<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投注统计</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --success-color: #ef4444;
            --warning-color: #f59e0b;
            --danger-color: #10b981;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --border-radius: 12px;
            --card-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
            --transition-speed: 0.3s;
        }

        body {
            background-color: #f0f2f5;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            color: var(--dark-color);
        }

        .container {
            max-width: 1400px;
            padding: 24px;
        }

        .page-header {
            margin-bottom: 30px;
            padding: 20px;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-header h2 {
            margin: 0;
            font-size: 24px;
            color: var(--dark-color);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .page-header h2 i {
            color: var(--primary-color);
        }

        .btn-back {
            color: var(--dark-color);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            background: white;
            border: 1px solid #e0e6ed;
            transition: all var(--transition-speed) ease;
            font-weight: 500;
        }

        .btn-back:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
        }

        .btn-back i {
            margin-right: 8px;
            font-size: 1.1em;
        }

        .card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            margin-bottom: 30px;
        }

        .card-body {
            padding: 24px;
        }

        .query-form {
            display: flex;
            gap: 20px;
            align-items: flex-end;
        }

        .form-group {
            flex: 1;
        }

        .form-label {
            color: #64748b;
            font-weight: 500;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }

        .form-control {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 10px 16px;
            font-size: 0.95rem;
            transition: all var(--transition-speed) ease;
            background-color: #f8fafc;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
            background-color: white;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            padding: 10px 24px;
            font-weight: 500;
            border-radius: 8px;
            transition: all var(--transition-speed) ease;
            height: 42px;
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
        }

        .stats-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .stats-summary .card-title {
            font-size: 0.95rem;
            color: #64748b;
            margin-bottom: 12px;
            font-weight: 500;
        }

        .stats-summary .value {
            font-size: 24px;
            font-weight: 600;
            color: var(--dark-color);
        }

        .streak-win { 
            color: var(--success-color) !important;
        }

        .streak-lose { 
            color: var(--danger-color) !important;
        }

        .table-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            margin-top: 30px;
        }

        .table-header {
            padding: 20px 24px;
            border-bottom: 1px solid #e2e8f0;
        }

        .table-header h5 {
            margin: 0;
            color: var(--dark-color);
            font-size: 18px;
            font-weight: 600;
        }

        .table {
            margin: 0;
        }

        .table th {
            background-color: #f8fafc;
            font-weight: 500;
            color: #64748b;
            padding: 16px;
            font-size: 0.9rem;
            border-bottom: 2px solid #e2e8f0;
        }

        .table td {
            padding: 16px;
            vertical-align: middle;
            color: #334155;
            font-size: 0.95rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .table tbody tr {
            transition: all var(--transition-speed) ease;
        }

        .table tbody tr:hover {
            background-color: #f8fafc;
        }

        .result-win { 
            background-color: rgba(16, 185, 129, 0.05);
        }

        .result-lose { 
            background-color: rgba(239, 68, 68, 0.05);
        }

        .result-draw { 
            background-color: rgba(245, 158, 11, 0.05);
        }

        .result-badge {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .result-badge.win {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .result-badge.lose {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        .result-badge.draw {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning-color);
        }

        .btn-export {
            color: #0d6832;
            background-color: #dcfce7;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            border-radius: var(--border-radius);
            transition: all var(--transition-speed) ease;
            font-weight: 500;
            gap: 8px;
            border: 1px solid #86efac;
        }

        .btn-export:hover {
            background-color: #0d6832;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(13, 104, 50, 0.2);
        }

        .btn-export i {
            font-size: 1.1em;
        }

        @media (max-width: 768px) {
            .container {
                padding: 16px;
            }
            .page-header {
                flex-direction: column;
                gap: 16px;
                text-align: center;
            }
            .query-form {
                flex-direction: column;
            }
            .btn-primary {
                width: 100%;
            }
            .table-responsive {
                margin: 0 -24px;
            }
            .table td, .table th {
                white-space: nowrap;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h2><i class="bi bi-graph-up"></i> 投注统计</h2>
            <a href="${pageContext.request.contextPath}/bet/list" class="btn-back">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
        </div>

        <div class="card">
            <div class="card-body">
                <form method="get" class="query-form">
                    <div class="form-group">
                        <label class="form-label">开始日期</label>
                        <input type="date" name="startDate" class="form-control" value="${startDate}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">结束日期</label>
                        <input type="date" name="endDate" class="form-control" value="${endDate}">
                    </div>
                    <div class="form-group" style="flex: 0 0 auto;">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-search"></i> 查询
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="stats-summary">
                    <div>
                        <h5 class="card-title">最高连胜</h5>
                        <div class="value streak-win">${stats.maxWinStreak}</div>
                    </div>
                    <div>
                        <h5 class="card-title">最高连败</h5>
                        <div class="value streak-lose">${stats.maxLoseStreak}</div>
                    </div>
                    <div>
                        <h5 class="card-title">命中率</h5>
                        <div class="value ${stats.hitRate >= 50 ? 'streak-win' : 'streak-lose'}">
                            <fmt:formatNumber value="${stats.hitRate}" pattern="#.##"/>%
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-container">
            <div class="table-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5><i class="bi bi-table"></i> 详细记录</h5>
                    <button onclick="exportData()" class="btn-export">
                        <i class="bi bi-file-earmark-excel"></i> 导出Excel
                    </button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>比赛</th>
                            <th>玩法</th>
                            <th>盘口</th>
                            <th>结果</th>
                            <th>金额</th>
                            <th>连胜/负</th>
                            <th>总结算金额</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${stats.streakDetails}" var="detail">
                            <c:if test="${not empty detail.betResult}">
                                <tr class="${detail.match == '当日汇总' ? 'table-light' : ''}">
                                    <td>${detail.betTime}</td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${detail.match == '当日汇总'}">
                                                <span class="badge bg-secondary">${detail.match}</span>
                                            </c:when>
                                            <c:otherwise>
                                                ${detail.match}
                                            </c:otherwise>
                                        </c:choose>
                                    </td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${detail.betType == '汇总'}">
                                                <span class="badge bg-secondary">${detail.betType}</span>
                                            </c:when>
                                            <c:otherwise>
                                                ${detail.betType}
                                            </c:otherwise>
                                        </c:choose>
                                    </td>
                                    <td>${detail.handicapValue}</td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${detail.betType == '汇总'}">
                                                <span class="badge bg-secondary">汇总</span>
                                            </c:when>
                                            <c:otherwise>
                                                <span class="result-badge ${detail.betResult == 'WIN' || detail.betResult == 'HALF_WIN' ? 'win' : 
                                                                       detail.betResult == 'LOSE' || detail.betResult == 'HALF_LOSE' ? 'lose' : 
                                                                       'draw'}">
                                                    ${detail.betResult}
                                                </span>
                                            </c:otherwise>
                                        </c:choose>
                                    </td>
                                    <td class="${detail.resultAmount >= 0 ? 'streak-win' : 'streak-lose'}">
                                        ￥<fmt:formatNumber value="${detail.resultAmount}" pattern="#,##0.00"/>
                                    </td>
                                    <td>
                                        <span class="result-badge ${detail.streak.startsWith('+') ? 'win' : 
                                                               detail.streak.startsWith('-') ? 'lose' : 
                                                               'draw'}">
                                            <c:choose>
                                                <c:when test="${detail.streak.startsWith('+')}">
                                                    ${fn:replace(detail.streak, '+', '')}连胜
                                                </c:when>
                                                <c:when test="${detail.streak.startsWith('-')}">
                                                    ${fn:replace(detail.streak, '-', '')}连败
                                                </c:when>
                                                <c:otherwise>
                                                    ${detail.streak}
                                                </c:otherwise>
                                            </c:choose>
                                        </span>
                                    </td>
                                    <td class="${detail.totalResultAmount >= 0 ? 'streak-win' : 'streak-lose'}">
                                        ￥<fmt:formatNumber value="${detail.totalResultAmount}" pattern="#,##0.00"/>
                                    </td>
                                </tr>
                            </c:if>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function exportData() {
            // 获取当前的日期参数
            const startDate = document.querySelector('input[name="startDate"]').value;
            const endDate = document.querySelector('input[name="endDate"]').value;
            
            // 构建导出URL
            let exportUrl = '${pageContext.request.contextPath}/export/streak';
            if (startDate || endDate) {
                exportUrl += '?';
                if (startDate) exportUrl += 'startDate=' + startDate;
                if (startDate && endDate) exportUrl += '&';
                if (endDate) exportUrl += 'endDate=' + endDate;
            }
            
            // 使用fetch API发送请求
            fetch(exportUrl, {
                method: 'GET',
                credentials: 'include' // 包含cookies
            })
            .then(response => {
                if (response.redirected) {
                    // 如果是重定向响应，跳转到重定向URL
                    window.location.href = response.url;
                    return;
                }
                if (!response.ok) {
                    throw new Error('导出失败');
                }
                return response.blob();
            })
            .then(blob => {
                if (!blob) return; // 如果是重定向，blob会是undefined
                
                // 创建下载链接
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                
                // 设置文件名
                const filename = 'streak_' + 
                    (startDate || new Date().toISOString().split('T')[0]) + '_' +
                    (endDate || new Date().toISOString().split('T')[0]) + '.xlsx';
                a.download = filename;
                
                // 触发下载
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            })
            .catch(error => {
                console.error('导出错误:', error);
                alert('导出失败，请重试或联系管理员');
            });
        }
    </script>
</body>
</html> 